<script lang="tsx">
import { defineComponent, ref } from 'vue'
import {
  getJLDictOptions,
  getDictOptions
} from '@/utils/dict'

export default defineComponent({
  name: 'DictTag',
  props: {
    type: {
      type: String,
      required: true
    },
    value: {
      type: [String, Number, Boolean],
      required: true
    },
    color: {
      type: String,
      default: ''
    },
    isJL: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const dictData = ref()
    const getDictObj = (dictType, value) => {
      let dictOptions = []
      if (props.isJL) {
        dictOptions = getJLDictOptions(dictType)
      } else {
        dictOptions = getDictOptions(dictType)
      }
      dictOptions.forEach((dict) => {
        if (dict.value === value) {
          dictData.value = dict
        }
      })
    }
    const rederDictTag = () => {
      if (!props.type) {
        return null
      }
      if ([undefined, null].includes(props.value)) {
        return null
      }
      const classes = {
        'icon-label': true,
        blue: props.color === 'blue',
        orange: props.color === 'orange',
        red: props.color === 'red',
        gray: props.color === 'gray',
        green: props.color === 'green',
        orangeRed: props.color === 'orangeRed',
        gray1: props.color === 'gray1',
        magenta: props.color === 'magenta'
      }
      getDictObj(props.type, props.value.toString())
      return (
        <span class={classes}>{dictData.value?.label}</span>
      )
    }
    return () => rederDictTag()
  }
})
</script>
<style lang="scss" scoped>
.icon-label {
  padding: 4px 8px;
  border-radius: 4px;
}

.blue {
  color: #409efe;
  border: 1px solid rgba(64, 158, 254, 0.5);
  background-color: #409efe14;
}

.orange {
  color: #e6a23c;
  border: 1px solid rgba(230, 162, 60, 0.5);
  background-color: #e6a23c14;
}

.red {
  color: #f56c6c;
  border: 1px solid rgba(245, 108, 108, 0.5);
  background-color: #f56c6c14;
}

.gray {
  color: #909399;
  border: 1px solid rgba(144, 147, 153, 0.5);
  background-color: #90939914;
}

.green {
  color: #67c23a;
  border: 1px solid rgba(103, 194, 58, 0.5);
  background-color: #67c23a14;
}

.orangeRed {
  font-size: 12px;
  line-height: 24px;
  padding: 3px 8px;
  color: #ff6416;
  border: 1px solid #ff6416;
  background-color: rgba(255, 100, 22, 0.08);
  border-radius: 4px;
}

.gray1 {
  font-size: 12px;
  line-height: 24px;
  padding: 3px 8px;
  color: #909399;
  border: 1px solid #909399;
  background-color: rgba(144, 147, 153, 0.08);
  border-radius: 4px;
}

.magenta {
  font-size: 12px;
  line-height: 24px;
  padding: 3px 8px;
  color: #e366ff;
  border: 1px solid #e366ff;
  background-color: rgba(227, 102, 255, 0.08);
  border-radius: 4px;
}
</style>
